<template>
  <Card>
    <Table row-key="id" border :columns="columns12" :data="configList">
      <template slot="action" slot-scope="{ row }">
        <Button
          type="primary"
          size="small"
          style="margin-right: 5px"
          @click="editConfigBtn(row)"
          >edit</Button
        >
      </template>
    </Table>
    <Modal
      v-model="isShowEditModal"
      title="修改系统配置"
      @on-cancel="$Message.info('cancel edit link')"
      @on-ok="confirmEditConfig"
    >
      <Form
        ref="editConfigFromRef"
        :label-width="80"
        :model="editForm"
        :rules="editFormRule"
      >
        <FormItem label="name" prop="name">
          <Input v-model="editForm.name" />
        </FormItem>
        <FormItem label="value" prop="value">
          <Input v-model="editForm.value" />
        </FormItem>
        <FormItem label="status" prop="status">
          <Input v-model="editForm.status" />
        </FormItem>
      </Form>
    </Modal>
  </Card>
</template>

<script>
import { mapActions } from "vuex";

export default {
  name: "Config",
  data() {
    return {
      configList: [],

      columns12: [
        {
          title: "id",
          key: "conf_id"
        },
        {
          title: "name",
          key: "conf_name"
        },
        {
          title: "value",
          key: "conf_value"
        },
        {
          title: "create_time",
          key: "conf_create_time"
        },
        {
          title: "status",
          key: "conf_status"
        },
        {
          title: "Action",
          slot: "action",
          width: 150,
          align: "center"
        }
      ],
      editForm: {
        id: "",
        name: "",
        value: "",
        status: "0"
      },
      editFormRule: {
        name: [
          {
            required: true,
            message: "The name cannot be empty",
            trigger: "blur"
          }
        ]
      },
      isShowEditModal: false
    };
  },
  methods: {
    ...mapActions(["fetchAdminConfig", "editConfig"]),
    async getConfig() {
      const res = await this.fetchAdminConfig();
      if (res.code === 2000) {
        this.configList = res.data.content;
      }
    },
    editConfigBtn(row) {
      this.editForm.id = row.conf_id;
      this.editForm.name = row.conf_name;
      this.editForm.value = row.conf_value;
      this.editForm.status = row.conf_status;
      this.isShowEditModal = true;
    },
    confirmEditConfig() {
      this.$refs.editConfigFromRef.validate(async isValid => {
        if (!isValid) {
          this.$Message.error("表单验证不通过");
          setTimeout(() => (this.isShowEditModal = true), 2);
        } else {
          const formData = Object.assign({}, this.editForm);
          this.$refs.editConfigFromRef.resetFields();
          console.log(formData);
          const res = await this.editConfig({ formData, id: this.editForm.id });
          this.editForm = {
            id: "",
            name: "",
            value: "",
            status: "0"
          };
          await this.getConfig();
          if (res.code === 2002) {
            this.$Message.success("修改成功");
            await this.getConfig();
          } else {
            this.$Message.error("修改失败 message:" + res.message);
          }
        }
      });
    }
  },
  created() {
    this.getConfig();
  }
};
</script>
<style scoped></style>
